<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆 | Anim</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.4.11/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1/dist/vue-resource.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.4.11/lib/index.js"></script>
<style type="text/css">
* {
	margin: 0;
    padding: 0;
}
html {
	height: 100%;
}
body {
	height: 100%;
	background-color: #373d41 !important;
}
.el-header {
	padding: 20px;
}
.el-footer {
	padding: 20px;
}
.el-main {
	padding: 0;
}
.el-menu {
	border-right: 0;
}
</style>
</head>
<body>
<div id="appLogin">
<el-container>
	<el-header style="color: #fff; background-color: #252a2f; border-bottom: 1px solid rgba(255,255,255,0.3);">Anim</el-header>
	<el-main style="width: 100%; height: 600px; background-color: #252a2f;">
		<el-container style="height: 100%;">
			<el-aside style="margin: 0 auto; width: 990px;">
				<el-container style="margin-top: 100px;">
					<el-aside style="width: 610px; color: #fff;">
						<h2>Anim</h2>
						<h3>nix.anim</h3>
					</el-aside>
					<el-aside style="width: 380px; padding: 30px; background-color: #fff; border-radius: 1px" width="380px">
						<el-form ref="formLogin" :model="modelLogin" status-icon :rules="rulesLogin" label-width="0px">
							<el-form-item label="" prop="username">
								<el-input v-model="modelLogin.username" ref="username" placeholder="用户名" tabindex="1" maxlength="50"></el-input>
							</el-form-item>
							<el-form-item label="" prop="password">
								<el-input v-model="modelLogin.password" type="password" placeholder="密码" tabindex="2" maxlength="50"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button ref="loginButton" type="primary" :loading="isButtonLoadingLogin" @click="onSubmitLogin" tabindex="3">登陆</el-button>
							</el-form-item>
						</el-form>
					</el-aside>
				</el-container>		
			</el-aside>
		</el-container>
	</el-main>
	<el-footer style="width: 100%; height: 180px; background-color: #373d41; color: #999;">&copy; nix.anim</el-footer>
</el-container>
</div>
</body>
<script>
	var redirectUrl = '${redirect}';
	var appLogin = new Vue({
		el: '#appLogin',
		data() {
			var checkUsername = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('用户名不能为空'));
		        } else {
		        	callback();
		        }
			};
			var checkPassword = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('密码不能为空'));
		        } else {
		        	callback();
		        }
			};
			return {
				modelLogin: {
					username: '',
					password: ''
				},
				rulesLogin: {
					username: [{validator: checkUsername, trigger: 'blur'}],
					password: [{validator: checkPassword, trigger: 'blur'}]
				},
				urlPostLogin: '/api/user/login',
				urlIndex: 'http://localhost:8091',
				isButtonLoadingLogin: false
			}
		},
		methods: {
			onSubmitLogin() {
				//发送 post 请求
				this.$refs.formLogin.validate((valid) => {
					if (valid) {
						this.isButtonLoadingLogin = true;
						this.$refs.formLogin.$http.post(this.urlPostLogin, this.modelLogin, {emulateJSON: true})
						.then(function (response) {
							if (response.body.status == 200) {
								appLogin.isButtonLoadingLogin = false;
								if (redirectUrl == "") {
									location.href = appLogin.urlIndex;
								} else {
									location.href = redirectUrl;
								}
							} else {
								this.$message.error(response.body.msg);
								appLogin.isButtonLoadingLogin = false;
							}
						}).catch(function (error) {
							console.log(error);
						});							
					}
				});	
			},
			buttonEnterLogin() {
				this.onSubmitLogin();
			}
		},
		created() {
			var that = this;
			document.onkeydown = function(e) {
				var key = window.event.keyCode;
				if (key == 13) {
					that.buttonEnterLogin();
				}
			}
		}
	})
</script>
</html>